<script setup >
    import { ref, reactive, nextTick, onMounted, onUnmounted } from 'vue';
    import { getWordCloud } from '@/api/board';
    let hotWord = ref([]);
    let cloudRef = ref();
    let eles = ref([]);
// 随机生成的
let moveAry = reactive([]);   
const data = [
  // { itemName:'外壳无破损', value:10 },
  // { itemName:'空载温度≤60℃', value:30 },
  // { itemName:'无异常噪音', value:15 },
  // { itemName:'无持续满载', value:30 },
  // { itemName:'无高危漏洞', value:15 },
  // { itemName:'杀毒软件病毒库', value:20 },
  // { itemName:'实时防护已开启', value:18 }
]
onMounted(() => {
  getWordCloud()
  .then(res=>{
    if ( res.data.code === 200) {
      // { itemName: "1-1-3", rectifyCount: 2 }   
      hotWord.value = res.data.data.sort((a,b)=> a.rectifyCount < b.rectifyCount ? -1 : 1 );
      nextTick(()=>{
        setStyle();
        setCla();
      })
      
    }
  })
  window.addEventListener("resize", () => {
    // 监听页面尺寸变化
    setStyle();
    setCla();
  });
});
//随机生成每个标签的移动样式并动态添加到页面中
 const setStyle = () => {
  let wrapper = cloudRef.value;
  if ( !wrapper ) return;
  let runkeyframes = "";
  // 往不同的方向
  let d = ["+", "-"], stepX = 50, stepY = 30;
  // 动画范围
  let w = (wrapper.offsetWidth - 50 ) / 2;
  let h = (wrapper.offsetHeight - 30) / 2 ;
  if ( !hotWord.value.length ) return;
  for (var i = 0; i < hotWord.value.length; i++) {
    // scale变化区间[1 - 1.4];  opacity变化区间[0.2 - 1]
    // let eWidth = ( eles.value[i] && eles.value[i].offsetWidth ) / 2;
    // let eHeight = ( eles.value[i] && eles.value[i].offsetHeight ) / 2;
  
    let ts = (1 +  0.4 * ( i + ( i === 0 ? 0 : 1 ) ) / hotWord.value.length).toFixed(2) ; 
    let tOpacity = 0.2 + ( i + ( i === 0 ? 0 : 1 ) ) / hotWord.value.length * 0.8; 
    let th = d[Math.round(Math.random())]; //随机取符号
    let x = Math.ceil(Math.random() * w);
    let x1 = x;
    x1 = th == "+" && x + 100 > w ? x - 100 : x;
    let tx = th + x1;//横向平移translateX
    let y = Math.ceil(Math.random() * h).toFixed(2);
    let y1 = y - 87 * ts > h ? h : y;
    let ty = d[Math.round(Math.random())] + y1; //纵向平移translateY

    runkeyframes += ` @keyframes move${i + 1}{
          0% {
            opacity: 0;
            transform: translateX(0) translateZ(-300px) scale(0.2);
          }
          25% {
            opacity: ${tOpacity};
          }
          50% {
             opacity: ${tOpacity};
            transform: translateX(${tx}px) translateY(${ty}px) translateZ(0)
          scale(${ts});
          }
         90% {
            opacity: ${tOpacity};
            transform: translateX(${tx}px) translateY(${ty}px) translateZ(0)
          scale(${ts});
          }
           100% {
        opacity: 0;
        transform: translateX(${tx}px) translateY(${ty}px) translateZ(0)
          scale(${ts});
      }
    }`;
    // runkeyframes += ` @keyframes move${i + 1}{
    //       0% {
    //         opacity: 0;
    //         transform: translateX(-50%) translateY(-50%) translateZ(-300px) scale(0.2);
    //       }
    //       25% {
    //         opacity: 1;
    //       }
    //       50% {
    //          opacity: 1;
    //         transform: translateX(calc(-50% + ${tx}px)) translateY(calc( -50% + ${ty}px)) translateZ(0)
    //       scale(${ts});
    //       }
    //      90% {
    //         opacity: 1;
    //         transform: translateX(calc( -50% + ${tx}px)) translateY(calc( -50% + ${ty}px)) translateZ(0)
    //       scale(${ts});
    //       }
    //       100% {
    //         opacity: 0;
    //         transform: translateX(calc( -50% + ${tx}px)) translateY(calc( -50% + ${ty}px)) translateZ(0)
    //           scale(${ts});
    //   }
    // }`;
  }
  // console.log(runkeyframes);

  // 创建style标签
  const style = document.createElement("style");
  // 设置style属性
  style.type = "text/css";
  // 将 keyframes样式写入style内
  style.innerHTML = runkeyframes;
  // 将style样式存放到head标签
  document.getElementsByTagName("head")[0].appendChild(style);
};
// 给hotWord添加styleCon
const setCla = () => {
  filterItem();
  hotWord.value.map((item,index) => {
    let ts = (Math.random() * 5).toFixed(2);
    // item.styleCon = ` move${moveAry[index]} 10s ease-in-out infinite`;
    item.styleCon = ` move${index + 1} 5s ease-in-out infinite ${ts}s`;
  });
};
//随机生成 hotWord.length个不同的随机整数，以免位置重复相互覆盖
const filterItem = () => {
  var count = hotWord.value.length;
  var originalArray = new Array();
  for (var i = 0; i < count; i++) {
    originalArray[i] = i + 1;
  }
  for (var num, i = 0; i < count; i++) {
    do {
      num = Math.floor(Math.random() * count);
    } while (originalArray[num] == null);
    moveAry.push(originalArray[num]);
    originalArray[num] = null;
  }
};
// :style="{ animation: item.styleCon }"
// :class="{ stop: item.isStop }"

// @mouseenter="item.isStop = true"
// @mouseleave="item.isStop = false"
</script>

<template>
  <ul ref="cloudRef" class="cloud">
      <li
        v-for="(item, index) in hotWord"
        :style="{ animation: item.styleCon }"
        :key="`${index}`"
        :ref="el=>{ if ( el ) eles.push(el); }"
        @mouseenter="item.isStop = true"
        @mouseleave="item.isStop = false"
      >
       {{ item.itemName }}
      </li>
  </ul>

</template>
<style lang="scss" scoped>
.cloud {
    width: 100%;
    height: 100%;
    position: relative;
    li {
      background-image:linear-gradient(to right, #1d478d, #166c8d);
      padding:var(--sPadding);
      font-size: 16px;
      display: inline-block;
      position: absolute;
      left: 50%;
      top: 50%;
      font-size:12px;
      color:#fff;
      transform: translate(-50%, -50%);
      transform-style: preserve-3d;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border-radius:30px;
      border:1px solid #709ebc;
      opacity:0;
      &::after {
        // content: "";
        // width: 6px;
        // height: 6px;
        // background: #fea41d;
        // position: absolute;
        // left: 9px;
        // top: 12px;
      }
      &.stop {
        animation-play-state: paused !important; /* 暂停动画 */
      }
    }
  }

</style>